<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1"><span style="font-weight: bolder;font-size: 20px; color: #2788f3;">实习经历</span></el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="24">
        <el-card
          style="
                margin-top: 10px;
                padding-bottom: 10px;
                width: 100%;"
          shadow="hover">
          <div>
            <!--实习经历向标题-->
            <div class="job-status__title">
              实习经历
              <span class="job-status__title__must">必填</span>
            </div>
            <!--实习经历标题-->

            <!--编辑按钮 -->
            <div  style="float: right">
              <el-button type="success" size="medium"  @click="handleAdd()" ><i class="el-icon-plus"></i>&nbsp;&nbsp;新增实习经历</el-button>
            </div>
            <!--编辑按钮-->

            <!--实习经历列表展示-->
            <div style="clear: both;">
              <el-card
                style="
                    margin-top: 10px;
                    padding-bottom: 10px;
                    box-shadow: 1px 2px 5px #8c939d;
                    width: 100%;"
                shadow="hover">
                <template v-if="experienceList.length != 0">
                  <el-descriptions v-for="(item,index) in experienceList" :key="item.id"  style="padding: 20px;color: red;"  :title="item.postType" :column="2">
                    <template slot="extra">
                      <el-button type="warning" size="medium"  @click="handleUpdate(item)"  class="el-icon-edit">修改</el-button>

                      <el-button type="danger" size="medium"  @click="handleDelete(item)"  class="el-icon-delete-solid">删除</el-button>
                    </template>
                    <el-descriptions-item label="实习公司">{{item.companyName}}</el-descriptions-item>
                    <el-descriptions-item label="实习职位">{{item.postName}}</el-descriptions-item>
                    <el-descriptions-item label="薪资">{{item.salary}}</el-descriptions-item>
                    <el-descriptions-item label="实习内容">{{item.description}}</el-descriptions-item>
                    <el-descriptions-item label="实习开始时间">{{item.joinDate|formatDateTime}}</el-descriptions-item>
                    <el-descriptions-item label="实习结束时间">{{item.leaveDate|formatDateTime}}</el-descriptions-item>
                  </el-descriptions>
                </template>
                <template v-else>
                  <el-result icon="info" title="新增信息提示" subTitle="当前您的简历还没有实习经历方面的说明哦！">
                    <template slot="extra">
                      <el-empty description="快新增增实习经历吧！"></el-empty>
                    </template>
                  </el-result>
                </template>
              </el-card>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>


  <el-dialog
    :title="isEdit?'编辑实习经历':'添加实习经历'"
    :visible.sync="dialogVisible"
    width="40%">
    <el-form :model="experience"
             :rules="rule"
             ref="dataForm"
             label-width="150px" size="small">


      <el-form-item label="职位类型" prop="postType">
        <el-cascader
          style="width: 250px"
                ref="myCascader"
                     :options="postTypeTree"
                     :show-all-levels="false"
                     filterable
                     clearable
                     @change="handlePostTypeTreeChange">
        </el-cascader>
      </el-form-item>
      <el-form-item label="公司名称：" prop="companyName" >
        <el-input v-model="experience.companyName"  style="width: 250px"></el-input>
      </el-form-item>
      <el-form-item label="实习职务：" prop="postName" >
        <el-input v-model="experience.postName" style="width: 250px"></el-input>
      </el-form-item>
      <el-form-item label="实习内容：" prop="postName" >
        <el-input type="textarea"  v-model="experience.description" style="width: 250px"></el-input>
      </el-form-item>
      <el-form-item label="薪酬：" prop="salary">
        <el-input v-model="experience.salary"  style="width: 250px"></el-input>
      </el-form-item>
      <el-form-item label="入职时间" prop="joinDate" label-width="150px">
        <el-date-picker
          v-model="experience.joinDate"
          type="date">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="离职时间" prop="leaveDate" label-width="150px">
        <el-date-picker
          v-model="experience.leaveDate"
          type="date">
        </el-date-picker>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleDialogConfirm('dataForm')" size="small">确 定</el-button>
    </span>

  </el-dialog>

  </div>
</template>

<script>
import {formatDate} from '@/utils/date';
import {findAllExperience,update,deleteExperience,save,findById} from '@/api/experience';
import {getPostTypeTree} from "@/api/postType";
//默认的角色表单
const defaultExperience = {
  id: null,
  companyName: null,
  postName: null,
  postType: null,
  joinDate: null,
  leaveDate:null,
  salary:null
};

export default {
  name: "index",
  data() {
    return {
      experience:Object.assign({}, defaultExperience),//表单数据
      listLoading: false,//列表加载
      isEdit: false,//是不是编辑表单
      experienceList:[],//实习经历数组
      dialogVisible:false,
      postTypeTree: [],//职位树
      rule: {
        companyName: [{required: true, message: '请输入公司名称', trigger: 'blur'}],
        postName:[{required: true, message: '请输入职位名称', trigger: 'blur'}],
        postType:[{required: true, message: '请输入职位类型', trigger: 'blur'}],
        joinDate:[{required: true, message: '请输入入职时间', trigger: 'blur'}],
        leaveDate:[{required: true, message: '请输入离职时间', trigger: 'blur'}],
        salary: [{required: true, message: '请输入月薪资', trigger: 'blur'}],
        description: [{required: true, message: '工作描述', trigger: 'blur'}],
      },//表单的校验规则
    }
  },
  created() {
    this.findAll();
    this.getPostTypeTree();
  },
  filters: {
    //格式化日期
    formatDateTime(time) {
      if (time == null || time === '') {
        return 'N/A';
      }
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  methods: {
    //处理职位类型树选择变化的方法 完成 职位名称的获取
    handlePostTypeTreeChange(value){
      //获取到级联选择器的label值
      let labelArray =  this.$refs.myCascader.getCheckedNodes()[0].pathLabels
      //获取最后一级
      const name = labelArray[2]
      //赋值给数据模型intention
      this.experience.postType = name

    },
    //获取职位类型树
    getPostTypeTree(){
      console.log("======系统正在获取职位类型树========");
      getPostTypeTree().then(res=>{
        this.postTypeTree = res.data;
      })
      console.log("======系统获取职位类型树成功！！========");

    },
    //获取学生实习经历集合
    findAll(){
      console.log("======系统正在获取学生实习经历集合========")
      findAllExperience().then(res=>{this.experienceList = res.data;})
      console.log("======系统获取学生实习经历集合成功！！========")
    },
    //处理添加的方法
    handleAdd() {
      this.dialogVisible = true;
      this.isEdit = false;
      this.experience = Object.assign({},defaultExperience);
    },
    //处理删除
    handleDelete(item) {
      this.$confirm('是否要删除学生经历吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteExperience(item.id).then(res=>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })

      });
    },
    //处理更新
    handleUpdate(item) {
      this.dialogVisible = true;
      this.isEdit = true;
      findById(item.id).then(res=>{
        this.experience = res.data
      })
    },
    //处理表单提交
    handleDialogConfirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('是否要确认?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if (this.isEdit) {
              update(this.experience).then(response => {
                this.$message({
                  message: '修改成功！',
                  type: 'success'
                });
                this.dialogVisible =false;
                this.findAll();
              })
            } else {
              save(this.experience).then(response => {
                this.$message({
                  message: '添加成功！',
                  type: 'success'
                });
                this.dialogVisible =false;
                this.findAll();
              })
            }
          })
        }
      });


    },
  }
}
</script>

<style scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}

/*求职状态标题*/
.job-status__title {
  float: left;
  margin-bottom: 29px;
  font-size: 24px;
  color: #333;
  letter-spacing: 1.21px;
}
/*求职状态标题*/

/*求职状态必填标识项*/
.job-status__title__must {
  background: #ef7c67;
  border-radius: 2px;
  display: inline-block;
  width: 34px;
  height: 16px;
  font-size: 12px;
  text-align: center;
  line-height: 16px;
  color: #fff;
  vertical-align: 4px;
}
/*求职状态必填标识项*/

/*个人信息包裹容器*/
.profile-pre-wrapper {
  clear: both;
  position: relative;
  color: #333;
  padding-top: 20px;
}
/*个人信息包裹容器*/
</style>
